import { Col, Input, Row } from 'antd';
import React from 'react';

export default class HostField extends React.Component {
  constructor(props) {
    super(props);
    const model = props.value || {};
    this.state = {
      host: model.host,
      port: model.port,
    };
  }
  onChange = (evt) => {
    this.setState(
      {
        [evt.target.dataset.name]: evt.target.value,
      },
      () => {
        this.props.onChange && this.props.onChange(this.state);
      }
    );
  };
  render() {
    return (
      <Row gutter={10}>
        <Col span={18}>
          <Input disabled={this.props.disabled} value={this.state.host} onChange={this.onChange} data-name='host' />
        </Col>
        <Col span={6}>
          <Input
            disabled={this.props.disabled}
            value={this.state.port}
            type='number'
            onChange={this.onChange}
            data-name='port'
            placeholder='端口'
          />
        </Col>
      </Row>
    );
  }
}
